<template>
  <div class="box">
    <el-card class="box-card" v-loading="loading"
             element-loading-text="模型计算中">
      <template #header>
        <div class="card-header">
          <h3 style="display: inline">文本：</h3>
          <el-button class="button" type="primary" style="float:right;" round
                     @click="onClose">
            关闭
          </el-button>
        </div>
      </template>
      <div class="text-item" v-html="text"/>
      <el-divider/>
      <h4>困惑度：{{ perplexity }}</h4>
    </el-card>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";

export default {
  name: "PerplexityCalculationTaskCard",
  data() {
    return {
      loading: true,
      perplexity: 0.0,
    }
  },
  props: {
    text: String,
    cardIndex: Number,
    maxLength: Number,
  },
  mounted() {
    this.axios.get('/perplexity', {
      params: {text: this.text}
    }).then(response => {
      this.perplexity = response.data.perplexity
      this.loading = false
    }).catch(err => {
      ElMessage('获取文本困惑度计算结果' + this.text + '失败, 详情见控制台')
      console.log(err)
      this.loading = false
    })
  },
  methods: {
    onClose() {
      this.$emit('close')
    },
  }
}
</script>

<style scoped>
.box {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 20px 2px 6px rgba(0, 0, 0, .04);
  border-radius: 4px;
  padding: 5px 10px 10px 10px;
}

.card-header {
  text-align: left;
}

.text-item {
  text-align: left;
}

.box-card {
  width: 100%;
  text-align: left;
  margin-top: 10px;
}
</style>